<template>
  <div class="boss">
    <div class="top">
      <div class="now">
        <p class="t1">{{ date.drr }}</p>
        <p class="t2">实时湿度</p>
      </div>
      <div class="yesterday">
        <p class="t1">{{ err }}</p>
        <p class="t2">昨日湿度</p>
      </div>
    </div>
    <div class="tab">
      <table>
        <thead>
          <th style="width: 165px">日期/时间</th>
          <th>湿度度</th>
          <th>是否异常</th>
          <th>备注</th>
        </thead>
        <tbody>
          <tr v-for="(item, index) in date.brr" :key="item">
            <td>{{ item }}</td>
            <td>{{ date.crr[index] }}</td>
            <td>无</td>
            <td></td>
          </tr>
        </tbody>
      </table>
      <p>已经到底啦!</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    sdata: {
      type: Array,
    },
    type3: {
      type: Number,
    },
  },
  data() {
    return {
      a: true,
      err: "",
    };
  },
  mounted() {},

  computed: {
    date() {
      var brr = [];
      var crr = [];
      var drr = "";
      if (this.sdata.length > 0) {
        var arr = this.sdata;
        drr = arr[0].temp[arr[0].temp.length - 1];
        if (this.a) {
          this.err = arr[1].average;
          this.a = false;
        }

        if (this.type3 == 0) {
          for (var i = 0; i < arr.length; i++) {
            brr.push(arr[i].date);
            crr.push(arr[i].average);
            // brr.push(arr[arr.length - 1 - i].date);
            // crr.push(arr[arr.length - 1 - i].average);
          }
        } else if (this.type3 == 1) {
          crr = arr[0].temp.reverse();
          for (var i = 0; i < crr.length; i++) {
            brr.push(crr.length - 1 - i + ":00");
          }
        } else if (this.type3 == 2) {
          for (var i = 0; i < arr.length; i++) {
            brr.push(arr[i].date);
            crr.push(arr[i].average);
          }
        } else if (this.type3 == 3) {
          for (var i = 0; i < arr.length; i++) {
            brr.push(arr[i].date);
            crr.push(arr[i].average);
          }
        } else if (this.type3 == 4) {
          for (var i = 0; i < arr.length; i++) {
            brr.push(arr[i].date);
            crr.push(arr[i].average);
          }
        }
      }
      return { brr, crr, drr };
    },
  },
};
</script>

<style lang="less" scoped>
.boss {
  height: 389px;
  width: 552px;
  border-radius: 0 0 8px 8px;
  background-color: #fff;
  padding-top: 16px;
}
.top {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
  text-align: center;
  color: #fdffff;
  .now {
    width: 234px;
    height: 106px;
    background: url("../img/shouye63.png");
    margin-right: 8px;
  }
  .yesterday {
    width: 234px;
    height: 106px;
    background: url("../img/shouye66.png");
    background-size: 234px 106px;
  }
  .t1 {
    padding: 24px 0 14px;
    font-size: 30px;
    font-weight: 800;
  }
  .t2 {
    font-size: 18px;
    font-weight: 600;
  }
}
.tab {
  margin: 0 44px 16px;
  overflow: auto;
  height: 241px;
  table {
    width: 100%;
    text-align: center;
    // border-collapse: collapse;
    thead {
      position: sticky;
      top: 0;
      z-index: 2;
    }
    td,
    th {
      border-bottom: #e9f1f7 2px solid;
    }
    th {
      height: 34px;
      background-color: #eff3f9;
      font-size: 16px;
      color: #415277;
      line-height: 34px;
      font-weight: 600;
    }
    td {
      height: 33px;
      line-height: 33px;
      color: #728aa3;
      font-size: 12px;
    }
  }
  p {
    text-align: center;
    font-size: 14px;
    color: #728aa3;
    padding-top: 10px;
  }
}
.tab::-webkit-scrollbar {
  width: 5px;
  height: 100%;
}
.tab::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #9b9da0;
}
.tab::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  background: #f2f6fa;
}
</style>